<!--
@Descripttion 搜索栏
@version 1.0.0
@Author Bell
@ 使用
  引入组件
    import SearchBar from '@/components/table/search-bar'
  注册组件
    components: {
      SearchBar
    }
  使用
    <SearchBar @query="queryList" @reset="resetForm">插槽区域</SearchBar>
    <SearchBar @query="queryList" @reset="resetForm" :loading="false" label-width="75px">插槽区域</SearchBar>
    @query      Function 必填         查询触发函数
    @reset      Function 必填         重置触发函数
    loading     Boolean  必填         是否加载中
    label-width String   默认值(75px) 表单标签宽度
 -->
<template>
  <div class="search-box" v-resize="searchBarOverflow">
    <div class="search-bar" :class="[showMore ? 'search-more' : 'search-row']">
      <el-form :inline="true" :label-width="labelWidth" ref="searchBar" @keyup.enter.native="query">
        <slot></slot>
        <el-form-item class="search-btns">
          <template v-if="showMoreBtn">
            <span class="c-primary cursor-p" @click="unfold" v-if="!showMore">{{$t('button.More options')}} <i class="el-icon-arrow-down"></i></span>
            <span class="c-primary cursor-p" @click="collapse" v-else>{{$t('button.Put away')}} <i class="el-icon-arrow-up"></i></span>
          </template>
          <el-button plain type="primary" icon="el-icon-search" @click="query" :loading="loadingQuery">{{$t('button.Query')}}</el-button>
          <el-button plain type="info" icon="el-icon-refresh" @click="reset" :loading="loadingReset">{{$t('button.Reset')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="search-bg" v-if="showMore" @click="showMore = false"></div>
  </div>
</template>
<script>
export default {
  props: {
    // 是否加载中
    loading: {
      required: true,
      type: Boolean
    },
    // 表单标签宽度
    labelWidth: {
      type: String,
      default: '75px'
    }
  },
  data() {
    return {
      showMore: false, // 更多选项-是否展开
      showMoreBtn: false, // 更多选项-是否展示触发按钮
      loadingQuery: false, // 按钮是否加载中
      loadingReset: false // 按钮是否加载中
    }
  },
  mounted() {
    this.searchBarOverflow()
  },
  watch: {
    // 监听加载状态
    loading: {
      handler(newValue, oldValue) {
        if (!newValue) {
          this.loadingQuery = false
          this.loadingReset = false
        }
      }
    }
  },
  methods: {
    /**
     * 通过容器宽度判断是否显示'更多选项'相关内容
     */
    searchBarOverflow() {
      const heightStr = window.getComputedStyle(this.$refs.searchBar.$el).height
      const height = Number(heightStr.replace('px', ''))
      if (height > 100) {
        this.showMoreBtn = true
      } else {
        this.showMoreBtn = false
      }
    },
    /**
     * 展开
     */
    unfold() {
      this.showMore = true
    },
    /**
     * 收起
     */
    collapse() {
      this.showMore = false
      setTimeout(() => {
        this.searchBarOverflow()
      }, 1)
    },
    /**
     * 查询
     */
    query() {
      this.showMore = false
      this.loadingQuery = true
      this.$emit('query')
    },
    /**
     * 重置
     */
    reset() {
      this.showMore = false
      this.loadingReset = true
      this.$emit('reset')
    }
  }
}
</script>
<style lang="less" scoped>
.search-box{
  position: relative;
  width: 100%;
  height: 80px;
  .el-icon-arrow-down, .el-icon-arrow-up{
    margin-right: 5px;
  }
}
.search-row {
  height: 80px;
  overflow: hidden;
  .el-form {
    padding-right: 300px !important;
  }
  .search-btns {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 0;
  }
  /deep/ .el-form--inline .el-form-item__label {
    width: inherit !important;
  }
}
.search-more{
  box-shadow: 0px 0px 16px 0px rgba(76, 76, 76, 0.3);
  .el-form {
    padding-right: 0 !important;
  }
}
.search-bar {
  position: absolute;
  z-index: 11;
  width: 100%;
  padding: 20px 20px 0 20px;
  background-color: #F5F5F5;
  .el-form {
    position: relative;
  }
}
.search-bg{
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
